<template>
  <div class="Remark relative">
    <slot name="handle"></slot>
    <el-tabs
      v-model="activeName"
      type="card"
      class="w-full my-tab-pane card-side-line"
      @tab-change="changeTab"
    >
      <el-tab-pane label="开发备注" name="1">
        <slot name="header"></slot>
        <template v-if="disabled">
          <div class="min-h-[100px]" v-html="form.dev_remark"></div>
          <div class="mt-3 flex">
            <span class="font-bold mr-3 mt-1">附件</span>
            <div
              class="flex items-center"
              v-for="(item, index) in form.dev_remark_appendix"
              :key="index"
            >
              <svg-icon class="mr-2" icon-class="file" />{{ item.name }}
              <el-link class="ml-2" type="primary" @click="downloadUrl(item.url)"
                >下载</el-link
              >
            </div>
          </div>
        </template>
        <template v-else>
          <el-input
            v-model="form.dev_remark"
            :autosize="{ minRows: 6, maxRows: 10 }"
            type="textarea"
            placeholder="请输入内容"
          />
          <div class="mt-3 flex">
            <span class="font-bold mr-3 mt-1">附件</span>
            <FileUpload
              v-model="form.dev_remark_appendix"
              :isShowTip="false"
            ></FileUpload>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="采购收货备注" name="2">
        <slot name="header"></slot>
        <template v-if="disabled">
          <div class="min-h-[100px]" v-html="form.purchase_remark"></div>
          <div class="mt-3 flex">
            <span class="font-bold mr-3 mt-1">附件</span>
            <div
              class="flex items-center"
              v-for="(item, index) in form.purchase_remark_appendix"
              :key="index"
            >
              <svg-icon class="mr-2" icon-class="file" />{{ item.name }}
              <el-link class="ml-2" type="primary" @click="downloadUrl(item.url)"
                >下载</el-link
              >
            </div>
          </div>
        </template>
        <template v-else>
          <el-input
            v-model="form.purchase_remark"
            :autosize="{ minRows: 6, maxRows: 10 }"
            type="textarea"
            placeholder="请输入内容"
          />
          <div class="mt-3 flex">
            <span class="font-bold mr-3 mt-1">附件</span>
            <FileUpload
              v-model="form.purchase_remark_appendix"
              :isShowTip="false"
            ></FileUpload>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="编辑备注" name="3">
        <slot name="header"></slot>
        <template #label>
          <span class="custom-tabs-label">
            <span>编辑备注</span><span class="text-red-500 text-lg">*</span>
          </span>
        </template>
        <template v-if="disabled">
          <div class="min-h-[100px]" v-html="form.edit_remark"></div>
          <div
            class="flex items-center"
            v-for="(item, index) in form.edit_remark_appendix"
            :key="index"
          >
            <svg-icon class="mr-2" icon-class="file" />{{ item.name }}
            <el-link class="ml-2" type="primary" @click="downloadUrl(item.url)"
              >下载</el-link
            >
          </div>
        </template>
        <template v-else>
          <template v-if="activeName == '3'">
            <Editor v-model="form.edit_remark" :min-height="100" />
            <div class="mt-3 flex">
              <span class="font-bold mr-3 mt-1">附件</span>
              <FileUpload
                v-model="form.edit_remark_appendix"
                :isShowTip="false"
              ></FileUpload>
            </div>
          </template>
        </template>
      </el-tab-pane>
      <el-tab-pane label="仓库质检备注" name="4">
        <slot name="header"></slot>
        <template v-if="disabled">
          <div class="min-h-[100px]" v-html="form.inspection_remark"></div>
          <div class="mt-3 flex">
            <span class="font-bold mr-3 mt-1">附件</span>
            <div
              class="flex items-center"
              v-for="(item, index) in form.inspection_remark_appendix"
              :key="index"
            >
              <svg-icon class="mr-2" icon-class="file" />{{ item.name }}
              <el-link class="ml-2" type="primary" @click="downloadUrl(item.url)"
                >下载</el-link
              >
            </div>
          </div>
        </template>
        <template v-else>
          <template v-if="activeName == '4'">
            <Editor v-model="form.inspection_remark" :min-height="100" />
          </template>
          <div class="mt-3 flex">
            <span class="font-bold mr-3 mt-1">附件</span>
            <FileUpload
              v-model="form.inspection_remark_appendix"
              :isShowTip="false"
            ></FileUpload>
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane label="仓库打包备注" name="5">
        <slot name="header"></slot>
        <template v-if="disabled">
          <div class="min-h-[100px]" v-html="form.packaging_remark"></div>
          <div class="mt-3 flex">
            <span class="font-bold mr-3 mt-1">附件</span>
            <div
              class="flex items-center"
              v-for="(item, index) in form.packaging_remark_appendix"
              :key="index"
            >
              <svg-icon class="mr-2" icon-class="file" />{{ item.name }}
              <el-link class="ml-2" type="primary" @click="downloadUrl(item.url)"
                >下载</el-link
              >
            </div>
          </div>
        </template>
        <template v-else>
          <template v-if="activeName == '5'">
            <Editor v-model="form.packaging_remark" :min-height="100" />
          </template>
          <div class="mt-3 flex">
            <span class="font-bold mr-3 mt-1">附件</span>
            <FileUpload
              v-model="form.packaging_remark_appendix"
              :isShowTip="false"
            ></FileUpload>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="Remark">
// import WangEditor from "@/components/WangEditor/index.vue";
import Editor from "@/components/Editor/index.vue";
// import WangEditor from "@/components/WangEditor/index.vue";
import FileUpload from "@/components/FileUpload";
import { convertRichTextToPlainText } from "@/utils/tools.js";
let handleType = reactive(inject("handleType"));
const activeName = ref("1");
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    (handleType.value == "edit" &&
      !(window.BTN_AUTH || []).includes("/goods/task/product/remark-info"))
  );
});

const form = computed({
  get: () => {
    let data = props.modelValue;
    data.dev_remark = convertRichTextToPlainText(data.dev_remark);
    return data;
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});
const changeTab = (tab) => {
  activeName.value = tab;
};

const downloadUrl = (url) => {
  if (!url) return;
  let link = document.createElement("a");
  link.style.display = "none";
  link.href = url;
  link.setAttribute("download", "导出img");
  document.body.appendChild(link);
  link.click();
};
</script>

<style lang="scss" scoped>
:deep(.card-side-line) {
  .el-tabs__header {
    margin-bottom: -1px;
  }
  .el-tabs__content {
    border: 1px solid #ccc;
    padding: 0 8px;
    margin-top: 2px;
  }
  .link-style {
    font-size: 14px;
  }
}
</style>
